<template>
  <div>
    <el-dialog v-model="open" title="请输入" width="600px" @open="initOpen" @close="cancelManual">
      <el-form :model="manualForm" ref="manualRef" label-width="80px" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude">
              <el-input v-model="manualForm.longitude" v-inputNumber="2" placeholder="保留两位小数"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude">
              <el-input v-model="manualForm.latitude" v-inputNumber="2" placeholder="保留两位小数"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="地址" prop="location">
          <el-input v-model="manualForm.location" v-inputNumber="2" placeholder="根据经纬度自动生成，可手动修改"></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="日期" prop="date">
              <el-date-picker v-model="manualForm.date" type="date" placeholder="年-月-日" value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时间" prop="earthquakeDate">
              <el-time-picker v-model="manualForm.earthquakeDate"  placeholder="时:分:秒" value-format="HH-mm-ss"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="震级" prop="mm">
          <el-input v-model="manualForm.mm" v-inputNumber="1" placeholder="保留一位小数"></el-input>
        </el-form-item>
        <el-form-item label="深度" prop="epiDepth">
          <el-input v-model="manualForm.epiDepth" v-inputNumber="0" placeholder="整数">
            <template #append>千米</template>
          </el-input>
        </el-form-item>
        <el-form-item label="出图单位" prop="drawingUnit">
          <el-input v-model="manualForm.drawingUnit" placeholder="手动输入"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="confirmMapping">确定制图</el-button>
        <el-button plain @click="cancelManual">取消</el-button>
      </template>
    </el-dialog>
    <ResultPreview v-model:open="resultPreviewOpen" :title="title" :type="type" :data="manualForm" />
  </div>
</template>
<script setup>
import { useDateFormat } from '@vueuse/core'
import ResultPreview from './resultPreview.vue'
import { getLocationBylatAndLon } from '@/api/quickMapping/quickMapping/index'

const props = defineProps({
  open: Boolean,
  title: String,
  type: String
})
const emits = defineEmits(['update:open'])
const { proxy } = getCurrentInstance()

const resultPreviewOpen = ref(false)
const manualForm = ref({})
const rules = {
  longitude: [{ required: true, message: '请填写经度！', trigger: 'blur' }],
  latitude: [{ required: true, message: '请填写纬度！', trigger: 'blur' }],
  location: [{ required: true, message: '请填写地址！', trigger: 'blur' }],
  date: [{ required: true, message: '请选择日期！', trigger: 'change' }],
  earthquakeDate: [{ required: true, message: '请选择时间！', trigger: 'change' }],
  mm: [{ required: true, message: '请填写震级！', trigger: 'blur' }],
  epiDepth: [{ required: true, message: '请填写深度！', trigger: 'blur' }],
  drawingUnit: [{ required: true, message: '请填写出图单位！', trigger: 'blur' }],
}
const initOpen = () => {
  proxy.resetForm('manualRef')
}
// 确定制图
const confirmMapping = () => {
  proxy.$refs.manualRef.validate(valid => {
    if (valid) {
      resultPreviewOpen.value = true
      if (manualForm.value.date && manualForm.value.earthquakeDate) {
        manualForm.value.earthquakeDate = manualForm.value.date + ' ' + manualForm.value.earthquakeDate
      }
      emits('update:open', false)
      resultPreviewOpen.value = true
    }
  })
}
// 确定制图-取消
const cancelManual = () => {
  emits('update:open', false)
}

watch([() => manualForm.value.longitude, () => manualForm.value.latitude], () => {
  let { longitude, latitude } = manualForm.value
  if (longitude && latitude) {
    getLocationBylatAndLon({ longitude, latitude }).then(res => {
      const { province, city, county } = res.data
      manualForm.value.location = province + city + county
      manualForm.value.province = province
      manualForm.value.city = city
      manualForm.value.county = county
    })
  }
})
</script>